<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="/the-good-thing-of-wang-feizhai/vue_basic/js/vue.js"></script>
    <div id="root">
        <p>{{num}}</p>
        <cpn ref="aaa"></cpn>
        <ccpn></ccpn>
        <button @click="btnClick">click</button>
    </div>

    <!-- 子组件 -->
    <template id="cpnT">
        <div>
            <h2>子组件1</h2>
            <ccpn></ccpn>
        </div>
    </template>
    <!-- 孙子组件 -->
    <template id="ccpnT">
        <div>
            <h2>孙子组件1</h2>
            <button></button>
        </div>
    </template>


    <script>
        const ccpn = {
            template: "#ccpnT",
            data(){
                return{
                    msg:'Hello,cpn2'
                }
            },
            components:{
            }
        }



        const cpn = {
            template: "#cpnT",
            data(){
                return{
                    msg:'Hello,cpn2'
                }
            },
            components:{
                ccpn
            }
        }



        Vue.component('cpn',{
            template:'#cpnT'
          })

        new Vue({
            el:'#root',
            data(){
                return{
                    num:1,
                }
            },
            methods: {
                btnClick(){
                    // 访问子组件
                        // 1.使用$child
                            // $children:访问子组件。
                            // 访问子组件的方法：this.$children[0].ontap()；  
                            // 访问子组件的属性：this.$children[0].name
                        // 2.使用$refs
                            // this.$refs.aaa.name
                }
            },
            components:{
                cpn,
                ccpn
            }
        })
    </script>
</body>
</html>